<template>
  <div
    class="px-[15px] cursor-pointer h-[76px] leading-[76px] dark:hover:bg-[var(--el-fill-color-light)] hover_row"
	@click="toggleClick"
	>
		<!--    class="px-[15px] hover:bg-dark-50 cursor-pointer h-[76px] leading-[76px] dark:hover:bg-[var(&#45;&#45;el-fill-color-light)]"-->
		<svg t="1691982916722"
    class="hamburger"
    viewBox="0 0 1024 1024" 
    :class="{ 'is-active': isActive }" 
    version="1.1" xmlns="http://www.w3.org/2000/svg" 
    p-id="4196" width="20" height="20">
    <path d="M408 442h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8z m-8 204a8 8 0 0 0 8
    8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56z m504-486H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8
    0 0 0 8-8v-56a8 8 0 0 0-8-8z m0 632H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8zM142.4
    642.1L298.7 519a8.8 8.8 0 0 0 0-13.9L142.4 381.9a8.9 8.9 0 0 0-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
					p-id="4197"
					fill="#fff"></path>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  isActive: {
    required: true,
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["toggleClick"]);

function toggleClick() {
  emit("toggleClick");
}
</script>

<style lang="scss" scoped>
.hamburger {
  width: 20px;
  height: 20px;
  vertical-align: -4px;

  &.is-active {
    transform: rotate(180deg);
  }
}

.hover_row:hover{
	background-color: rgb(118, 183, 249);
}
</style>
